<template>
	<view class="badge" :style="{top:top,right:right}" v-if="value > 0">{{value > 99?'99+':value}}</view>
</template>
<script>
	export default {
		name: "badge",
		data() {
			return {};
		},
		// 此处定义传入的参数
		props: {
			value: {
				type: [String, Number],
				default: '',
			},
			top: {
				type: [String, Number],
				default: '0',
			},
			right: {
				type: [String, Number],
				default: '0',
			},
		},
		watch: {},
		mounted() {},
		methods: {},
	}
</script>
<style lang="scss">
	.badge {
		position: absolute;
		top: -10rpx;
		right: -26rpx;
		z-index: 100;
		min-width: 28rpx;
		line-height: 1;
		padding: 6rpx 8rpx;
		border-radius: 50rpx;
		color: #FFFFFF;
		font-size: 18rpx;
		background-color: red;
		text-align: center;
		box-sizing: border-box;
	}
</style>